<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>我的京东</title>
	<style>
		p {
			width: 280px;
			color: #999;
			line-height: 28px;
			padding: 10px;
			background-color: #e3e4e5;
			margin-bottom: 0;
		}
		img {
			width: 280px;
			display: none;
		}
		.active {
			color: #f10215;
			background-color: white;
		}
	</style>
</head>
<body>
	<div class="box">
		<p>我的京东</p>
		<img src="menu.png" alt="">
	</div>
	<script src="jquery-3.3.1.min.js"></script>
	<script>
		var p=$('p');
		var img=$('img');
		p.mouseover(function(){
			// img.css('display','block');
			// img.show();
			// img.fadeIn();
			// img.fadeToggle();//让已显示的元素消失，未显示的显示；
			img.slideToggle();//滑动显示
			p.addClass('active');
		})
		p.mouseout(function(){
			// img.css('display','none');
			// img.fadeOut();
			img.slideToggle();
			p.removeClass();
		})
	</script>	
</body>
</html>